<template>
  <div class="main">
    <div class="Breadcrumb"></div>

    <div>
      <h1>确认订单</h1>
      <el-table :data="currentProduct" style="width: 100%">

      <el-table-column label="产品充值" width="362" >
        <template v-slot="{ row }">
					<img style="vertical-align: middle" width="40%" :src="row.imageUrl" alt="" />
					&nbsp;
					<span style="color: #f4c14f; font-weight: bolder">{{ row.productName }}</span>
					<br />
					<span>{{ row.description }}</span>
				</template>
      </el-table-column>

      <el-table-column prop="price" label="单价" width="362" >
        <template v-slot="{ row }">
					<span class="price">
						{{ row.price }}
					</span>
				</template>
      </el-table-column>

      <el-table-column label="数量" width="362"> 
        	<template v-slot="{ row }" >
						<el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
					</template>
      </el-table-column>

      <el-table-column label="小计" width="362" prop="address"> 
				<template>
					<span class="total_fee">{{ total_fee }}</span>
				</template>
      </el-table-column>

    </el-table>
     <div class="total-fee">
			<div class="box-wrap">
				<div class="box-shadow">
					<span class="realpay--title" data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">实付款：</span>
					<span class="realpay--price-symbol">¥</span>
					<span class="realpay--price" style="color: rgb(255, 80, 0)">{{ total_fee }}</span>
					<div class="order-confirmAddr">
						<div class="confirmAddr-addr-user">
							<span class="confirmAddr-title">充值详情：</span><span
								class="confirmAddr-pro">{{currentProduct[0]?.description}}</span>
						</div>
						<div class="confirmAddr-addr">
							<span class="confirmAddr-title">充值账户：</span><span class="confirmAddr-usn">
                {{userInfo.nickname}}</span>
						</div>
					</div>
				</div>
				</div>
        <div class="btn">
				<el-button @click="commitOrder" type="danger">提交订单</el-button>
			</div>
				</div>
        
			

    </div>
  </div>
</template>
<script>
import * as api from "@/api/transaction";
import { mapState } from "vuex";
export default {
  data() {
    return {
      num:1, //数量
      currentProduct: [],
      product_id:'',
    };
  },
  meta: { 
    title:"yzf",
    name:"预支付"
  },
  computed: {
    ...mapState("users", ["userInfo"]),
    // 计算总价格
    total_fee(){
      return (this.num*this.currentProduct[0]?.price).toFixed(2)
    }
  },
  created(){
    // 获取query参数
    let {product_id} =this.$route.query
    this.product_id=product_id
    api.getProductDetailApi(product_id)
    .then(res => {
      this.currentProduct=res.data.data
    })

  },
  methods: {
    commitOrder(){
        this.$confirm(
        `您是否确认购买${this.currentProduct[0]?.productName},商品总价格为${this.total_fee}`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info",
        }
      )
        .then(() => {
          api.preOrderApi(this.product_id,this.quantity)
          .then(res =>{
            console.log(res);
            if(res.data.state){
              // 下达成功，获取订单id
              let {order_id} = res.data
              // 跳转到支付页面，携带订单号
              this.$router.push({path:"../PayMent/Pay",query:{order_id}});
            }
          })
          
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取购买",
          });
        });
    }

  }, 
};
</script>
<style lang="less" scoped>
#app {
  .layout-container {
    .el-container {
      .is-vertical {
        .el-main {
          background-color: #fff;
          .main {
            line-height: 14px;
            font-size: 14px;
            text-align: left;
            .orders {
              display: flex;
              align-items: flex-end;
              flex-direction: column;
              margin-right: 130px;
              button {
                width: 180px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #fff;
                background-color: #f56c6c;
                border: none;
              }
              
            }
            h1 {
              margin: 80px 0 0 80px;
              font-weight: 900;
              font-size: 18px;
              color: black;
            }
            /deep/ .el-table {
              padding: 80px;
              position: static;
              .el-table__body-wrapper {
                .el-table__cell:nth-of-type(2) {
                  .cell {
                    color: red;
                  }
                }
                .el-table__cell:nth-of-type(4) {
                  .cell {
                    color: red;
                  }
                }
              }
              .el-table__cell {
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
.total-fee {
	text-align: right;
  padding-right: 130px;
}

.box-wrap {
	display: inline-block;
	border: 1px solid #ff0036;

	.box-shadow {
		border: 3px solid #fff0e8;
		min-width: 300px;
		padding: 10px 5px 10px 20px;

		.realpay--title {
			font-weight: 700;
			color: #333;
		}

		.realpay--price-symbol {
			font-size: 26px;
			margin-right: 4px;
			color: #999;
		}

		.realpay--price {
			color: #ff0036;
			font: 700 26px tahoma;
		}

		.order-confirmAddr {
			line-height: 1.6;
			font-weight: bolder;
			margin-top: 10px;
			font-size: 16px;

			.confirmAddr-usn {
				color: #ff0036;
				font-size: 20px;
			}

			.confirmAddr-pro {
				color: goldenrod;
				font-size: 16px;
			}
		}
  }}}

</style>
